<template>
  <div class="com-container makeUpEcharts he">
    <div class="com-chart" ref="echarts"></div>

    <!-- <span v-if="totalPage>1" class="page">第 {{currentPage}}页</span> -->
    <!-- <div v-if="p1>1" class="pagesT">
      <span class="page" v-for="(item,index) in p1" :key="index">
        <i :style="{color:index+1==currentPage?'#4c8cc9':'#c9c9c9'}">第{{index+1}}页</i>
      </span>
    </div>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ["commonData", "commonText"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      //   x轴数据
      xData: null,
      currentPage: 1, //当前显示页数
      totalPage: 0, // 共有多少页
      timerId: null, // 定时器标识
      p1: 0,
    };
  },
  watch: {
    commonData: function (a, b) {
      this.getData();
    },
    commonText: function (a, b) {
      this.getData();
    }
    // activeIndex(val, oldVal) {
    // },
  },
  mounted() {
    console.log('8/888');
    setTimeout(() => {
      this.initChart();

      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 20);
  },
  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      const initOption = {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '8%',
          top: '20%',
          containLabel: true
        },
        legend: {

          data: [this.commonText, '合格', '不合格', '合格率'],

          top: '6%',
          textStyle: {
            color: "rgba(0, 117, 255, 1)",
            fontSize: 12
          },
          itemWidth: 20,
          itemHeight: 8,
          itemGap: 25
        },
        xAxis: {
          type: 'category',
          //   data: ['C15', 'C20', 'C25', 'C30', 'C35', 'C40', 'C45', 'C50', 'C55', 'C60'],
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 117, 255, 1)'

            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dotted",
              color: "rgba(0, 117, 255, 0.2)",
            }
          },
          axisTick: {
            show: false,
          },

          axisLabel: {
            textStyle: {
              color: "rgba(197, 227, 255, 1)",
              fontSize: 12
            }
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 0, 0, 0.8)",

          axisPointer: {
            type: "shadow",
          },
          padding: [5, 15],
          textStyle: {
            fontSize: 12,
            color: "rgba(255,255,255,1)",
            lineHeight: 28,
          },
          // formatter: function(e){
          //   console.log(e);
          // },


        },
        yAxis: [{
          type: 'value',
          axisLine: {
            show: false,

          },

          splitLine: {
            show: true,
            lineStyle: {
              type: "dotted",
              color: "rgba(0, 117, 255, 0.2)",
            }
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 117, 255, 1)",
              fontSize: "12"
            }
          },
          axisLine: {
            lineStyle: {
              color: '#cdd5e2',
              fontSize: "18"
            }
          },
        },
        {
          type: "value",
          name: "",
          min: 0,
          max: 100,
          nameTextStyle: {
            color: "rgba(0, 117, 255, 1)"
          },
          position: "right",
          axisLine: {
            lineStyle: {
              color: '#cdd5e2'
            }
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
              color: "rgba(0, 117, 255, 1)",
              fontSize: 12
            }
          }
        }
        ],
        series: [{
          name: "合格率",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: false, //平滑曲线显示

          symbol: "circle", //标记的图形为实心圆
          symbolSize: 4, //标记的大小
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: '{c}' + '%',
                color: "#fff",
                interval: 0,

              },
              color: 'rgba(80, 252, 115, 1)',
              borderColor: 'rgba(80, 252, 115, 1)', //圆点透明 边框
              borderWidth: 5
            },

          },
          lineStyle: {
            color: "rgba(80, 252, 115, 1)"
          },

          // data: [42, 38, 48, 35, 29, 28, 30, 85, 70, 62]
        }, {
          name: this.commonText,
          type: 'bar',
          barWidth: '10px',
          barGap: '70%',
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inside',
                interval: 0,
                fontSize: 8,
                rotate: 90,
              },
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0, 98, 255, 0.7000)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 98, 255, 0.1000)", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          // data: [400, 400, 300, 300, 300, 400, 400, 400, 300, 200, 450]
        },
        {
          name: '合格',
          type: 'bar',
          barWidth: '10px',
          barCategoryGap: '30%',
          itemStyle: {

            normal: {
              label: {
                show: true,
                position: 'inside',
                interval: 0,
                rotate: 90,
                fontSize: 8,
              },
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(27, 201, 138, 0.7000)'
              }, {
                offset: 1,
                color: 'rgba(27, 201, 138, 0.1000)'
              }]),

            }

          },
          // data: [400, 500, 500, 500, 500, 400, 400, 500, 500, 180, 333]
        },
        {
          name: '不合格',
          type: 'bar',
          barWidth: '10px',
          barCategoryGap: '20px',

          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inside',
                interval: 0,
                rotate: 90,
                fontSize: 8,
              },
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(241, 177, 68, 0.7000)'
              }, {
                offset: 1,
                color: 'rgba(241, 177, 68, 0.1000)'
              }]),

            }
          },
          // data: [400, 600, 700, 700, 1000, 400, 400, 600, 700, 200, 190]
        },
        ]
      };
      this.chartInstance.setOption(initOption);
    },
    getData() {
      // console.log(999, this.commonData);

      // this.allData = {
      //   param3: 20, param2: 10, param1: 20
      // }
      this.updateChart(this.commonData, this.commonText)
    },
    // 更新图表
    updateChart(data, text) {

      var dataOption = {
        xAxis: {
          type: 'category',
          data: data.XaxisData,
        },
        legend: {

          data: [this.commonText, '合格', '不合格', '合格率'],
        },
        tooltip: {
          formatter: function (parms) {
            // console.log(parms);
            var str = "";
            parms.map((item, index) => {
              if (index == 0) {
                // str +=
                //   item.marker +
                //   "" +
                //   item.seriesName + " " +
                //   item.value + "%" + "</br>";
                str += `<div style="display:flex;justify-content: space-between;"><div style="margin-right:15px">${item.marker}
                ${item.seriesName}</div><div>${item.value}%</div></div>`
              } else {
                str += `<div style="display:flex;justify-content: space-between;"><div style="margin-right:15px">${item.marker}
                ${item.seriesName}</div><div>${item.value}</div></div>
                `
              }

            })


            // if (parms.name == "累计完成金额") {
            //   str =
            //     "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1bcc98;'></span>" +
            //     "" +
            //     parms.data.name +
            //     "</br>" +
            //     "金额: " +
            //     money.toFixed(0) +
            //     "万元</br>" +
            //     "占比：" +
            //     point +
            //     "%";
            // } else if (parms.name == "") {
            //   str =
            //     "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1bcc98;'></span>" +
            //     "" +
            //     "累计完成金额" +
            //     "</br>" +
            //     "金额: " +
            //     money.toFixed(0) +
            //     "万元</br>" +
            //     "占比：" +
            //     point +
            //     "%";
            // } else {
            //   str =
            //     parms.marker +
            //     "" +
            //     parms.data.name +
            //     "</br>" +
            //     "金额：" +
            //     parms.data.value.toFixed(0) +
            //     "万元</br>" +
            //     "占比：" +
            //     parms.percent +
            //     "%";
            // }
            var box = `<div style="padding:5px 5px;font-size:0.14rem">${str}</div>`;
            return box;
          },
        },
        series: [{
          data: data.PassRateData
        }, {
          name: this.commonText,
          data: data.OutPutData
        }, { data: data.QualiFiedData }, {
          data: data.UnQualiFiedData
        }]
        //   data: [
        //     { value: data.param3, name: "2年以下" },
        //     { value: data.param2, name: "2~5年" },
        //     { value: data.param1, name: "5年以上" },
        //   ],

      };


      this.chartInstance.setOption(dataOption);
      tools.loopShowTooltip(this.chartInstance, dataOption, {
        loopSeries: true,
      });
    },

    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      // const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
      const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3;
      // console.log(titleFontSize);
      //   和分辨率大小相关的配置项
      const adapterOption = {
        legend: {

          textStyle: {

            fontSize: titleFontSize / 2.213
          },
          itemWidth: titleFontSize / 1.2078,
          itemHeight: titleFontSize / 3.0195,
          itemGap: titleFontSize * 1.0349
        },
        xAxis: {


          axisLabel: {
            textStyle: {

              fontSize: titleFontSize / 2.213
            }
          },
        },

        yAxis: [{

          axisLabel: {
            textStyle: {

              fontSize: titleFontSize / 2.213
            }
          },
          axisLine: {
            lineStyle: {

              fontSize: titleFontSize / 1.342
            }
          },
        },
        {




          axisLabel: {


            textStyle: {

              fontSize: titleFontSize / 2.213
            }
          }
        }
        ],
        series: [{

          barWidth: titleFontSize / 2.4156



        },
        {

          barWidth: titleFontSize / 2.4156

        },
        {


          barWidth: titleFontSize / 2.4156


        }, {




          symbolSize: titleFontSize / 6.039, //标记的大小



        }
        ]
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scoped>

</style>
